import React from 'react'
import "./style.less"
import { useHistory } from 'react-router-dom'


export default function LifePay () {
  const history = useHistory();

  function clickHandle () {
    history.push('/lifemore')
  }
  function clickHandle1 () {
    history.push('/broadband')
  }
  function clickHandle2 () {
    history.push('/electricity')
  }


  return (
    <div>
      <div id="pay">
        <h2>生活缴费</h2>
        <div className="hot-container">
          <ul className="clear-fix">
            <li>
              <i className="iconfont icon-team blue"></i>
              <span>水费</span>
            </li>
            <li onClick={clickHandle2}>
              <i className="iconfont icon-home yellow"></i>
              <span>电费</span>
            </li>
            <li onClick={clickHandle1}>
              <i className="iconfont icon-car green"></i>
              <span>宽带</span>
            </li>
            <li onClick={clickHandle}>
              <i className="iconfont icon-indent grey"></i>
              <span>更多</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  )
}
